<!DOCTYPE HTML>
<html>
<head>
	<title>预约拍照</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="照相好，good" />
    <meta name="keywords" content="照相好，good" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
	<link type="text/css" rel="stylesheet" href="style/css.css" />
</head>
<body>
	
    <section class="test" name="test1" id="test1">
    <section class="featured">
    	<h2>主打业务<span>Main Business</span></h2>
    </section>
    
    <section class="business">
    	<ul>
    		<li class="clearfix">
    			<img src="images/business1.jpg" alt="照片类型">
    			<div class="money">
    				<h3>证件照</h3>
    				<p>￥78.00</p>
    			</div>
    			<div class="botton">
    				<p>
    					<input type="checkbox" name="checkbox">
    					<i></i>
    				</p>
    			</div>
    		</li>
    		<li class="clearfix">
    			<img src="images/business2.jpg" alt="照片类型">
    			<div class="money">
    				<h3>结婚登记照</h3>
    				<p>￥78.00</p>
    			</div>
    			<div class="botton">
    				<p>
    					<input type="checkbox" name="checkbox">
    					<i></i>
    				</p>
    			</div>
    		</li>
    		<li class="clearfix">
    			<img src="images/business3.jpg" alt="照片类型">
    			<div class="money">
    				<h3>社交头像照</h3>
    				<p>￥78.00</p>
    			</div>
    			<div class="botton">
    				<p>
    					<input type="checkbox" name="checkbox">
    					<i></i>
    				</p>
    			</div>
    		</li>
    		<li class="clearfix">
    			<img src="images/business4.jpg" alt="照片类型">
    			<div class="money">
    				<h3>文艺照/形象照</h3>
    				<p>￥78.00</p>
    			</div>
    			<div class="botton">
    				<p>
    					<input type="checkbox" name="checkbox">
    					<i></i>
    				</p>
    			</div>
    		</li>
    		<li class="clearfix">
    			<img src="images/business5.jpg" alt="照片类型">
    			<div class="money">
    				<h3>签证照</h3>
    				<p>￥78.00</p>
    			</div>
    			<div class="botton">
    				<p>
    					<input type="checkbox" name="checkbox">
    					<i></i>
    				</p>
    			</div>
    		</li>
    	</ul>
    </section>
    
    <section class="submit" id="submit">
    	<a href="#" onclick="javascript:show(),scroller('test2', 800),set11()">下一步</a>
    </section>
    </section>
    
    
    <section class="test" name="test2" id="test2">
    <form method="post" action="">
    	<section class="userName">
			<ul>
				<li><p>姓名：</p><input type="text" placeholder="请输入您的姓名"></li>
				<li><p>电话：</p><input type="text" placeholder="13888868889"></li>
			</ul>
    	</section>
		<section class="dateSelect">
			<p>请选择档期（开放5天内的档期）</p>
			<ul class="clearfix">
				<li>
					<input type="radio" name="time" id="male1">
					<label for="male1">
						<i class="timeBg"></i>
						<span class="month">08 月</span>
						<span class="day">28</span>
						<i class="week">周日</i>
					</label>
				</li>
				<li>
					<input type="radio" name="time" id="male2">
					<label for="male2">
						<i class="timeBg"></i>
						<span class="month">08 月</span>
						<span class="day">28</span>
						<i class="week">周一</i>
					</label>
				</li>
				<li>
					<input type="radio" name="time" id="male3">
					<label for="male3">
						<i class="timeBg"></i>
						<span class="month">08 月</span>
						<span class="day">28</span>
						<i class="week">周二</i>
					</label>
				</li>
				<li>
					<input type="radio" name="time" id="male4">
					<label for="male4">
						<i class="timeBg"></i>
						<span class="month">08 月</span>
						<span class="day">28</span>
						<i class="week">周三</i>
					</label>
				</li>
				<li>
					<input type="radio" name="time" id="male5">
					<label for="male5">
						<i class="timeBg"></i>
						<span class="month">08 月</span>
						<span class="day">28</span>
						<i class="week">周四</i>
					</label>
				</li>
			</ul>
		</section>
    
    	<section class="timeMinu">
    		<ul class="clearfix">
    			<li class="guoqi">
    				<input type="radio" name="minutes" id="minuClick1">
    				<label for="minuClick1">
    					<i></i>
    					<span>10:00</span>
    				</label>
    			</li>
    			<li class="guoqi">
    				<input type="radio" name="minutes" id="minuClick2">
    				<label for="minuClick2">
    					<i></i>
    					<span>10:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick3">
    				<label for="minuClick3">
    					<i></i>
    					<span>11:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick4">
    				<label for="minuClick4">
    					<i></i>
    					<span>11:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick5">
    				<label for="minuClick5">
    					<i></i>
    					<span>12:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick6">
    				<label for="minuClick6">
    					<i></i>
    					<span>13:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick7">
    				<label for="minuClick7">
    					<i></i>
    					<span>13:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick8">
    				<label for="minuClick8">
    					<i></i>
    					<span>14:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick9">
    				<label for="minuClick9">
    					<i></i>
    					<span>14:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick10">
    				<label for="minuClick10">
    					<i></i>
    					<span>15:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick11">
    				<label for="minuClick11">
    					<i></i>
    					<span>15:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick12">
    				<label for="minuClick12">
    					<i></i>
    					<span>16:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick13">
    				<label for="minuClick13">
    					<i></i>
    					<span>16:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick14">
    				<label for="minuClick14">
    					<i></i>
    					<span>17:00</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick15">
    				<label for="minuClick15">
    					<i></i>
    					<span>17:30</span>
    				</label>
    			</li>
    			<li>
    				<input type="radio" name="minutes" id="minuClick16">
    				<label for="minuClick16">
    					<i></i>
    					<span>18:00</span>
    				</label>
    			</li>
    		</ul>
    	</section>
    
    	<section class="refer">
    		<a href="#" onclick="javascript:show2(),scroller('test1', 800)">上一步</a>
    		<input type="submit" value="确定">
    	</section>
    </form>
    </section>
    
    
    
    
    
    <script>
        var deviceWidth = document.documentElement.clientWidth;
        if(deviceWidth > 750) deviceWidth = 750;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
		
		
    </script>
    
    <script>
		function intval(v){
                v = parseInt(v);
                return isNaN(v) ? 0 : v;
            } // ?取元素信息   
            function getPos(e){
                var l = 0;
                var t = 0;
                var w = intval(e.style.width);
                var h = intval(e.style.height);
                var wb = e.offsetWidth;
                var hb = e.offsetHeight;
                while (e.offsetParent) {
                    l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                    t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                    e = e.offsetParent;
                }
                l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);
                t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);
                return {
                    x: l,
                    y: t,
                    w: w,
                    h: h,
                    wb: wb,
                    hb: hb
                };
            } // ?取??条信息   
            function getScroll(){
                var t, l, w, h;
                if (document.documentElement && document.documentElement.scrollTop) {
                    t = document.documentElement.scrollTop;
                    l = document.documentElement.scrollLeft;
                    w = document.documentElement.scrollWidth;
                    h = document.documentElement.scrollHeight;
                }
                else
                    if (document.body) {
                        t = document.body.scrollTop;
                        l = document.body.scrollLeft;
                        w = document.body.scrollWidth;
                        h = document.body.scrollHeight;
                    }
                return {
                    t: t,
                    l: l,
                    w: w,
                    h: h
                };
            } // ?点(Anchor)?平滑跳?   
            function scroller(el, duration){
                if (typeof el != 'object') {
                    el = document.getElementById(el);
                }
                if (!el)
                    return;
                var z = this;
                z.el = el;
                z.p = getPos(el);
                z.s = getScroll();
                z.clear = function(){
                    window.clearInterval(z.timer);
                    z.timer = null
                };
                z.t = (new Date).getTime();
                z.step = function(){
                    var t = (new Date).getTime();
                    var p = (t - z.t) / duration;
                    if (t >= duration + z.t) {
                        z.clear();
                        window.setTimeout(function(){
                            z.scroll(z.p.y, z.p.x)
                        }, 13);
                    }
                    else {
                        st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;
                        sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;
                        z.scroll(st, sl);
                    }
                };
                z.scroll = function(t, l){
                    window.scrollTo(l, t)
                };
                z.timer = window.setInterval(function(){
                    z.step();
                }, 13);
            }
	</script>
    
    
    <script>
		function show() {
			var objs=document.getElementsByName('checkbox');
			var isSel=false;//判断是否有选中项，默认为无
			for(var i=0;i<objs.length;i++){
			if(objs[i].checked==true){
				isSel=true;
				break;
				}
			}
			if(isSel==false){
				alert("请至少选择一种照片类型!!");
				return false;
			}
			document.getElementById("test2").style.display = "block";
		}
		function set1() {
		}
		function set11(){
			setTimeout(set1,800);
		}
		
		function show2() {
		}
	</script>
    
    
    
    
</body>
</html>
